<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="class_page bg_color" id="app">
			<div class="tab_box searchsort">
				<a href="#goods" class="blue">商品</a>
				<a href="#info">详情</a>
			</div>
			<div class="infobanner mt8" id="goods">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="(item, index) in data.multi_pic" :key="index">
							<img :src="item.img" />
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="shopinfo_top">
				<div class="shopinfo_top_t">
					<div class="price">
						<p class="new_price">￥{{data.price}}</p>
						<span>￥{{data.price_0}}</span>
					</div>
					<div class="kc">库存：{{data.inventory}}</div>
				</div>
				<h3>{{data.title}}</h3>
				<span>{{data.type_title}}</span>
			</div>
			<div class="shopinfo_box" id="info">
				<h2>商品介绍</h2>
				<div class="info" v-html="data.content"></div>
			</div>
			<div class="fb"></div>
			<div class="footercart">
				<div class="footercart_left">
					<div class="li" @click="goDetail('{:url(\'index\')}')">
						<i><img src="__API__/lib/images/home.png" /></i>
						<span>首页</span>
					</div>
					<div class="li" @click="goDetail('{:url(\'cart\')}')">
						<i><img src="__API__/lib/images/car.png" /></i>
						<span>购物车</span>
					</div>
				</div>
				<div class="footercart_right">
					<div v-if="level_id !=0" class="foot_btn grey_bg" @click="addcart('cart')">加入购物车</div>
					<div class="foot_btn blue_bg" @click="addcart('buy')">立即购买</div>
				</div>
			</div>
			<!-- 返回顶部 -->
			<div class="back_top" v-if="scrollTop > 180" @click.stop="backTop()"><img src="__API__/lib/images/back_top.png"
					alt=""></div>
			<!--加入购物车-->
			<div class="addcartmask" v-if="isCartShow" @click="closeCart()">
				<div class="addcartmask_info" @click.stop>
					<a href="javascript:;" class="buyclose" @click="closeCart()"><img src="__API__/lib/images/close.png"></a>
					<div class="addcarttop_tabinfo">
						<div class="addcartmask_top">
							<div class="img"><img :src="data.single_pic" /></div>
							<div class="addcartmask_top_r">
								<div class="price">￥{{data.price}}</div>
								<h3>{{data.title}}</h3>
								<span>库存：{{data.inventory}}</span>
							</div>
						</div>
					</div>
					<div class="addcartmask_con">
						<p>购买量</p>
						<div class="addnum">
							<span v-if="level_id>0" @click="carts('sub')"><img src="__API__/lib/images/jian.png" alt=""></span>
							<input type="text" name="" class="buynumber" id="" v-model="goodsNum" disabled>
							<span v-if="level_id>0" @click="carts('add')"><img src="__API__/lib/images/jia.png" alt=""></span>
						</div>
					</div>
					<div class="form_submit">
<!--						<div  v-if="type=='cart'" class="grey_bg" @click="addCart()">加入购物车</div>-->
						<div   v-if="type=='cart'" class="blue_bg" @click="addCart()">加入购物车</div>
						<div   v-if="type=='buy'" class="blue_bg" @click="addCart()">立即购买</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			var token = localStorage.getItem('token');
			if(!token){
				window.location = "{:url('login')}";
			}
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					data: {

					},
					isCartShow: false,
					level_id:0,
					scrollTop: 0,
					goodsNum: 1,
					type:0
				},
				mounted() {
					window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
				},		created: function() {
					let that=this;
					// axios
					// 		.get("{:url('Goods/view',['id'=>input('id')])}",{token:localStorage.getItem('token')})
					// 		.then(res=>{
					// 			this.data =res.data.data
					// 			//this.data.content= this.entityToString(res.data.data.content);
					//
					// 		})
					common.ajax("{:url('Member/my_level')}",{type:'cart',token:localStorage.getItem('token')} , function(res) {
						//common.showToast(res.msg);
						that.level_id = res.data.level_id;
						// that.getData(searchValue);
					})
					var id = "{:input('id')}";
					common.ajax("{:url('Goods/view')}",{token:localStorage.getItem('token'),id:id} , function(res){
						that.data =res.data
					})

				},
				methods: {


					// 获取页面滚动距离
					handleScroll() {
						let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
							.scrollTop;
						this.scrollTop = scrollTop;
					},
					//返回顶部
					backTop() {
						window.scrollTo({
							top: 0,
							behavior: "smooth"
						});
					},
					goDetail(url) {
						common.openUrl(url)
					},
					//开启购物车
					addcart(type) {
						this.isCartShow = true;
						this.type=type
						console.log(type)
					},
					//关闭购物车
					closeCart() {
						this.isCartShow = false;
					},
					//数量
					carts(type) {
						if (type == 'sub') {
							if (this.goodsNum > 1) {
								this.goodsNum--;
							}
						}
						if (type == 'add') {
							this.goodsNum++;
						}
					},
					//加入购物车
					addCart() {

						common.ajax("{:url('Cart/create')}",{type:this.type,token:localStorage.getItem('token'),goods_id:this.data.id,number:this.goodsNum} , function(res){
							common.showToast(res.msg);

							if(res.code==201){
								setTimeout(function() {
									common.openUrl("{:url('order_submit')}?cart_id="+res.cart_id+'&type=buy');
								}, 1000)

							}

						})

						this.isCartShow = false;
						//关闭弹窗
					},
					//立即购买
					nowBuy() {

						//跳转提交订单页
						common.openUrl('order_submit.html');
						//关闭弹窗
						this.closeCart();
					}
				}
			});
		</script>
	</body>

</html>
